<template>
  <section class="box animated">
    <b-field grouped group-multiline>
      <div class="control">
        <button class="button field is-primary" @click="createUser">
          <b-icon pack="fa" icon="plus-circle"></b-icon>
          <span>创建用户</span>
        </button>
      </div>
    </b-field>
    <b-table :data="isEmpty ? [] : tableData" :mobile-cards="true">
      <template slot-scope="props">
        <b-table-column label="ID" width="40" numeric>
          {{ props.row.id }}
        </b-table-column>

        <b-table-column label="用户名">
          {{ props.row.username }}
        </b-table-column>

        <b-table-column label="姓名">
          {{ props.row.name }}
        </b-table-column>

        <b-table-column label="电子邮件" centered>
          {{ props.row.email }}
        </b-table-column>

        <b-table-column label="角色">
          {{ props.row.role }}
        </b-table-column>
      </template>

      <template slot="empty">
        <section class="section">
          <div class="content has-text-grey has-text-centered">
            <p>
              <b-icon
                icon="frown-o"
                size="is-large">
              </b-icon>
            </p>
            <p>Nothing here.</p>
          </div>
        </section>
      </template>
    </b-table>
  </section>
</template>

<script>
  export default {
    data () {
      return {
        tableData: [
          {'id': 1, 'username': 'Jesse', 'name': 'Simmons', 'email': '2016-10-15 13:43:27', 'role': 'Male'},
          {'id': 2, 'username': 'John', 'name': 'Jacobs', 'email': '2016-12-15 06:00:53', 'role': 'Male'}
        ],
        isEmpty: false
      }
    },
    methods: {
      createUser () {
        this.$router.push({name: 'users-create'})
      }
    }
  }
</script>
